<script lang="ts" setup>
import icon1 from '@img/menu_1.png'
import icon2 from '@img/menu_2.png'
import icon3 from '@img/menu_3.png'
import icon4 from '@img/menu_4.png'
import { reactive } from 'vue'

const menuArr = reactive([
  {
    state: 0,
    name: '待付款',
    icon: icon1,
    width: '30px',
    height: '30px',
  },
  {
    state: 1,
    name: '等待作业',
    icon: icon2,
    width: '28px',
    height: '28px',
  },
  {
    state: 2,
    name: '作业完成',
    icon: icon3,
    width: '32px',
    height: '37px',
  },
  {
    state: 3,
    name: '已完成',
    icon: icon4,
    width: '30px',
    height: '30px',
  },
])
// 跳转订单列表页
function handleOrderList(state: any) {
  uni.navigateTo({
    url: `/pages-sub/order/order-list?state=${state}`,
  })
}
</script>

<template>
  <view class="card-item">
    <view class="cell-item border">
      <view class="cell-item_center">
        我的订单
      </view>

      <view class="cell-item_right" @click="handleOrderList(-1)">
        <text>全部订单</text>
        <wd-icon name="arrow-right" size="18px" color="#BDBCBC" />
      </view>
    </view>

    <view class="menu-list">
      <view
        v-for="(item, index) in menuArr"
        :key="index"
        class="menu-item"
        @click="handleOrderList(item.state)"
      >
        <view style="height: 37px;">
          <image :src="item.icon" webp :style="{ width: item.width, height: item.height }" />
        </view>
        <view class="name">
          {{ item.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
	.card-item {
  margin-top: 24px;
  background-color: #fff;

  .menu-list {
    padding: 16px 0;
    display: flex;
    .menu-item {
      flex: 1;
      flex-shrink: 0;
      text-align: center;

      .name {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
      }
    }
  }
}
</style>
